<ix-page-header [title]="'Users' | translate">
  <ix-all-users-header></ix-all-users-header>
</ix-page-header>

<ix-master-detail-view
  #masterDetailView="masterDetailViewContext"
  [showDetails]="masterList.isSelectedUserVisible$ | async"
  [selectedItem]="selectedUser()"
>
  <ix-user-list
    #masterList
    master
    [dataProvider]="dataProvider()"
    [ixUiSearch]="searchableElements.elements.list"
    [isMobileView]="masterDetailView.isMobileView()"
    (toggleShowMobileDetails)="masterDetailView.toggleShowMobileDetails($event)"
    (userSelected)="selectedUser.set($event)"
  ></ix-user-list>

  <ng-container detail-header>
    @if (selectedUser(); as user) {
      <ix-user-detail-header [user]="user"></ix-user-detail-header>
    }
  </ng-container>

  <ng-container detail>
    @if (selectedUser(); as user) {
      <ix-user-details
        [user]="user"
      ></ix-user-details>
    }
  </ng-container>
</ix-master-detail-view>
